<template>
  <el-config-provider :locale="appStore.locale" :size="appStore.size">
    <el-header class="header">

      <div class="header-content" :style="{ 'background-color': titleName != '首页' ? '#22AFE5' : '', }">
        <div class="logo-menu">
          <img src="../src/assets/logo.png" class="logo" />
          <img src="../src/assets/title.png" class="title" />
          <div class="menu" :style="{ 'color': titleName != '首页' ? '#fff' : '#868686' }">
            <div :class="titleName == '首页' ? 'menu_items_active' : 'menu_items'" @click="gotos('/', '首页')">首页</div>
            <div :class="titleName == '科普' ? 'menu_items_actives' : 'menu_items'" @click="gotos('/science', '科普')">科普
            </div>
            <div :class="titleName == '圈子' ? 'menu_items_actives' : 'menu_items'" @click="gotos('/circle', '圈子')">圈子
            </div>
            <div :class="titleName == '新闻' ? 'menu_items_actives' : 'menu_items'" @click="gotos('/news', '新闻')">新闻</div>
            <!-- <div :class="titleName == '我们' ? 'menu_items_actives' : 'menu_items'" @click="gotos('', '我们')">我们</div> -->
            <div :class="titleName == '爱问小鲸' ? 'menu_items_actives' : 'menu_items'" @click="gotos('/chat', '爱问小鲸')">爱问小鲸
            </div>
          </div>
        </div>
        <div class="search-user">
          <el-input placeholder="搜索科普视频" :prefix-icon="'Search'" class="search_input" v-show="titleName == '首页'"
            v-model="search" />
          <el-input placeholder="搜索科普视频" :prefix-icon="'Search'" class="search_inputs" v-show="titleName != '首页'"
            v-model="search" />
          <el-button type="text" class="user_button" v-show="(titleName == '首页' || titleName == '新闻') && !getToken()" v-model="search"
            :style="{ 'color': titleName != '首页' ? '#fff' : '#868686' }" @click="denglu">用户登录</el-button>

          <el-button type="text" class="user_button" v-show="(titleName == '首页' || titleName == '新闻') && getToken()" v-model="search"
            :style="{ 'color': titleName != '首页' ? '#fff' : '#868686' }" @click="huiyuan">会员中心</el-button>

          <el-button type="text" class="user_button" v-show="(titleName == '首页' || titleName == '新闻') && !getToken()" v-model="search"
            :style="{ 'color': titleName != '首页' ? '#fff' : '#868686' }" @click="zhuce">用户注册</el-button>

          <el-button type="text" class="user_button" v-show="(titleName == '首页' || titleName == '新闻') && getToken()" v-model="search"
            :style="{ 'color': titleName != '首页' ? '#fff' : '#868686' }" @click="tuichu">退出账户</el-button>

          <el-button type="text" v-show="titleName != '首页' && titleName != '新闻'" v-model="search"
            :class="titleName == '会员' ? 'menu_items_actives' : 'user_button'"
            :style="{ 'color': titleName != '首页' ? '#fff' : '#868686' }" @click="huiyuan">会员中心</el-button>

          <el-button type="text" class="user_button" v-show="titleName != '首页' && titleName != '新闻'" v-model="search"
            :style="{ 'color': titleName != '首页' ? '#fff' : '#868686' }" @click="tuichu">退出账户</el-button>
        </div>
      </div>
    </el-header>
    <router-view />
    <el-footer class="footer" v-if="titleName != '隐私'" :style="{
      'color': titleName != '首页' ? '#A5A5A5' : 'rgb(134, 134, 134)', 'position': titleName != '首页' ? '' : 'fixed',
      'opacity': titleName != '首页' ? '1' : '1', 'background-color': titleName != '首页' ? '#f5f7fa' : ''
    }">
      <span style="cursor: pointer;" @click="gos">服务协议</span> <span style="cursor: pointer;" @click="gos">隐私政策</span>
      新ICP备2022000356号-3 新公网安备33011002011859号
    </el-footer>
  </el-config-provider>
  <Denglu @doClose="commoditydetailsClose" :dialogInfoVisible="dialogInfoVisible" :loginType="type" :title="titles">
  </Denglu>
</template>
<script setup lang="ts">
import Denglu from '@/components/Denglu/index.vue'
import { getToken } from '@/utils/auth';
import { ref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useUserStore } from '@/store/modules/user';
import { useAppStore } from '@/store/modules/app';
const appStore = useAppStore();
const router = useRouter()
const route = useRoute();
const search = ref('')
const userStore = useUserStore();
watch(() => route.path, (newValue) => {
  if (newValue == '/') {
    titleName.value = '首页'
  } else if (newValue == '/chat') {
    titleName.value = '爱问小鲸'
  } else if (newValue == '/circle') {
    titleName.value = '圈子'
  } else if (newValue == '/news') {
    titleName.value = '新闻'
  } else if (newValue == '/huiyuan') {
    titleName.value = '会员'
  } else if (newValue == '/science') {
    titleName.value = '科普'
  } else if (newValue == '/about') {
    titleName.value = '隐私'
  } else {
    titleName.value = '其他'
  }
})
const titleName = ref('首页')
const dialogInfoVisible = ref(false);
const type = ref()
const titles = ref()
const gotos = (address: string, title: string) => {
  if (getToken() || address == '/' || address == '/news') {
    if (address != '') {
      router.push({ path: address })
    }
    search.value = ''
    titleName.value = title
  } else {
    dialogInfoVisible.value = true
    type.value = 'account'
    titles.value = '学号登录'
  }

}
/** 关闭 */
const commoditydetailsClose = () => {
  dialogInfoVisible.value = false;
};

/** 登录 */
const denglu = () => {
  dialogInfoVisible.value = true
  type.value = 'account'
  titles.value = '学号登录'
}
/** 注册 */
const zhuce = () => {
  dialogInfoVisible.value = true
  type.value = 'mobile'
  titles.value = '手机登录/快捷注册'
}
/** 会员 */
const huiyuan = () => {
  router.push({ path: '/huiyuan' })
}
/** 退出 */
const tuichu = async () => {
  await ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  } as any);
  userStore.logout().then(() => {
    router.replace({
      path: '/',
      query: {
        redirect: encodeURIComponent(router.currentRoute.value.fullPath || '/')
      }
    });
  });
}
const gos = () => {
  // router.push({ path: '/about' })
  window.open('https://ys.djiaojing.com/news/76.html')
}
</script>

<style scoped lang="scss">
* {
  padding: 0;
  margin: 0;
}

.header {
  height: 100px;
  line-height: 100px;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1000;

  .header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 0 50px;

    .logo-menu {
      display: flex;
      align-items: center;

      .logo {
        height: 65px;
        margin-right: 20px;
        width: 57px;
      }

      .title {
        width: 112px;
        height: 31px;
        margin-right: 100px;
      }

      .menu {
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
        display: flex;
        align-items: center;

        .menu_items {
          margin-right: 40px;
          cursor: pointer;
          width: 72px;
          height: 27px;
          line-height: 27px;
          border-radius: 50%;
          text-align: center;
        }

        .menu_items_active {
          margin-right: 40px;
          cursor: pointer;
          width: 102px;
          height: 27px;
          line-height: 27px;
          border-radius: 15px;
          text-align: center;
          background-color: #000;
        }

        .menu_items_actives {
          margin-right: 40px;
          cursor: pointer;
          width: 102px;
          height: 27px;
          line-height: 27px;
          border-radius: 15px;
          text-align: center;
          background-color: rgb(11, 123, 165);
        }
      }
    }

    .search-user {
      display: flex;
      align-items: center;

      .search_input {
        width: 244px;
        height: 42px;
        margin-right: 20px;

        :deep(.el-input__wrapper) {
          background-color: rgba(255, 255, 255, 0.2);
          border-radius: 20px;
          box-shadow: none;
        }

        :deep(.el-input__inner) {
          font-weight: 400;
          font-size: 14px;
          color: #FFFFFF;
          opacity: 0.8;
        }

        :deep(.el-input__prefix) .el-icon {
          color: #fff;
          opacity: 0.3;
          font-size: 20px;
        }
      }

      .search_inputs {
        width: 244px;
        height: 42px;
        margin-right: 20px;

        :deep(.el-input__wrapper) {
          background-color: rgba(255, 255, 255, 0.2);
          border-radius: 20px;
          box-shadow: none;
        }

        :deep(.el-input__inner) {
          font-weight: 400;
          font-size: 14px;
          color: #FFFFFF;
        }

        :deep(.el-input__prefix) .el-icon {
          color: #fff;
          font-size: 20px;
        }

        :deep(.el-input__inner::placeholder) {
          color: #fff !important;
        }
      }

      .user_button {
        margin-left: 10px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
        color: #868686;
      }

      .menu_items_actives {
        margin-left: 10px;
        cursor: pointer;
        width: 102px;
        height: 27px;
        line-height: 27px;
        border-radius: 15px;
        text-align: center;
        background-color: rgb(11, 123, 165);
      }
    }
  }
}


.footer {
  width: 100%;
  z-index: 1000;
  bottom: 0;
  left: 0;
  text-align: center;
  height: 60px;
  line-height: 60px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  font-size: 14px;
  color: #FFFFFF;
  opacity: 0.2;
}
</style>
